import React from 'react';
import { Card, Space, Button, Typography } from 'antd';
import { DatabaseOutlined, FileOutlined, UpOutlined, DownOutlined } from '@ant-design/icons';
import { ExperimentDataCategory } from '../../types';

const { Text } = Typography;

interface QuickNavigationProps {
  categories: ExperimentDataCategory[];
  hasResults?: boolean;
  onNavigate?: (key: string) => void;
  hasExpanded?: boolean;
  onExpandAll?: () => void;
  onCollapseAll?: () => void;
}

const QuickNavigation: React.FC<QuickNavigationProps> = ({ 
  categories, 
  hasResults,
  onNavigate,
  hasExpanded = false,
  onExpandAll,
  onCollapseAll
}) => {
  const scrollToAndExpand = (key: string) => {
    // 先展开对应的折叠项
    if (onNavigate) {
      onNavigate(key);
    }
    
    // 然后滚动到对应位置
    setTimeout(() => {
      let element: HTMLElement | null = null;
      if (key === 'result-files') {
        element = document.getElementById('result-files');
      } else if (key.startsWith('category-')) {
        const categoryId = key.replace('category-', '');
        element = document.getElementById(`category-${categoryId}`);
      }
      
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }, 100);
  };

  return (
    <div
      style={{
        marginBottom: 16,
        position: 'sticky',
        top: 0,
        zIndex: 100,
        display: 'flex',
        justifyContent: 'flex-end'
      }}
    >
      <Card
        style={{
          background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)',
          border: '1px solid #d0d7de',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          display: 'inline-block',
          width: 'auto'
        }}
        size="small"
        styles={{ body: { padding: '12px 16px' } }}
      >
        <Space wrap>
          <Text strong style={{ marginRight: 8 }}>快速导航：</Text>
          {hasResults && (
            <Button
              type="link"
              size="small"
              onClick={() => scrollToAndExpand('result-files')}
              style={{ padding: '0 8px' }}
            >
              <FileOutlined /> 结果文件
            </Button>
          )}
          {categories.map((category) => (
            <Button
              key={category.id}
              type="link"
              size="small"
              onClick={() => scrollToAndExpand(`category-${category.id}`)}
              style={{ padding: '0 8px' }}
            >
              <DatabaseOutlined /> {category.name}
            </Button>
          ))}
          {(hasExpanded ? onCollapseAll : onExpandAll) && (
            <>
              <div style={{ width: 1, height: 16, background: '#d9d9d9', margin: '0 8px' }} />
              {hasExpanded ? (
                <Button
                  type="link"
                  size="small"
                  onClick={onCollapseAll}
                  style={{ padding: '0 8px', color: '#595959' }}
                  icon={<UpOutlined />}
                >
                  全部收起
                </Button>
              ) : (
                <Button
                  type="link"
                  size="small"
                  onClick={onExpandAll}
                  style={{ padding: '0 8px', color: '#595959' }}
                  icon={<DownOutlined />}
                >
                  全部展开
                </Button>
              )}
            </>
          )}
        </Space>
      </Card>
    </div>
  );
};

export default QuickNavigation;

